<template>
  <el-container>
    <el-header style="height: auto; padding: 0; background: transparent">
      <el-card shadow="never">
        <el-descriptions :column="1" title="问题方案">
          <el-descriptions-item label="问题">
            <i class="el-icon-circle-close"></i>
            期待多选行背景色高亮。
          </el-descriptions-item>
          <el-descriptions-item label="方案">
            <i class="el-icon-circle-check"></i>
            el-table / :highlight-selection-row="true"
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </el-header>

    <el-main style="display: flex; padding: 0; margin-top: 20px">
      <el-card shadow="never" style="flex: 1">
        <el-table border ref="table" :data="tableData" :highlight-selection-row="true" @selection-change="handleSelectionChange">
          <el-table-column type="selection"></el-table-column>
          <el-table-column label="日期" prop="date"></el-table-column>
          <el-table-column label="姓名" prop="name"></el-table-column>
          <el-table-column label="id" prop="id"></el-table-column>
          <el-table-column label="城市" prop="city"></el-table-column>
          <el-table-column label="辖区" prop="areas"></el-table-column>
          <el-table-column label="地址" prop="address"></el-table-column>
        </el-table>
        <br/>
        <code>
          multipleSelection: {{ multipleSelection }}
        </code>
      </el-card>
    </el-main>
  </el-container>
</template>

<script>

export default {
  name: "selection-single",
  data() {
    return {
      multipleSelection: [], // 多选值
      tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          city: '上海',
          areas: '普陀区',
          address: '上海市普陀区1518号',
          id: 200300
        }, {
          date: '2016-05-02',
          name: '张强',
          city: '深圳',
          areas: '南山区',
          address: '深圳市南山区1289号',
          id: 200301
        }, {
          date: '2016-05-04',
          name: '李刚',
          city: '广州',
          areas: '番禺区',
          address: '广州市番禺区912号',
          id: 200302
        }, {
          date: '2016-05-01',
          name: '刘虎',
          city: '杭州',
          areas: '临平区',
          address: '杭州市临平区729号',
          id: 200305
        }, {
          date: '2016-05-08',
          name: '赵小刚',
          city: '成都',
          areas: '金牛区',
          address: '成都市金牛区198号',
          id: 200308
        }, {
          date: '2016-05-06',
          name: '王大治',
          city: '天津',
          areas: '北仑',
          address: '天津市北仑区223号',
          id: 200308
        }, {
          date: '2016-05-07',
          name: '桑梓',
          city: '北京',
          areas: '顺义区',
          address: '北京市顺义区马坡115号',
          id: 200308
        }]
    };
  },
  mounted() {

  },
  methods: {
    // 多选
    handleSelectionChange(selection) {
      this.multipleSelection = selection
    }
  },
};
</script>

<style scoped>
.el-descriptions /deep/ .el-icon-circle-close {
  color: #f56c6c;
  margin-right: 6px;
}
.el-descriptions /deep/ .el-icon-circle-check {
  color: #42b883;
  margin-right: 6px;
}
</style>
